<template>
  <div class="aui-card--fill scroll-box card-box">
    <div class="pane-shell">
      <Search @sumbit='sumbit'>
        <!--  搜索项 -->
        <template slot="form">
          <el-form :inline="true"
                   @submit.native.prevent
                   :model="dataForm"
                   ref="dataForm"
                   @keyup.enter.native="search">
            <el-form-item prop="subject"
                          :rules="stringRule(false)">
              <el-input v-model.trim="dataForm.announcementSubject"
                        placeholder="请输入公告主题"
                        clearable></el-input>
            </el-form-item>
            <el-form-item prop="status"
                          :rules="stringRule(false)">
              <el-select v-model="dataForm.status"
                         clearable
                         placeholder="状态">
                <el-option v-for="item in statusList"
                           :key="item.id"
                           :label="item.name"
                           :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </template>
        <!--  操作按钮 -->
        <template slot='btns'>
          <el-button type="primary"
                     plain
                     v-if="$hasPermission('tb:noticeAnnouncement:add')"
                     @click="addOrUpdateHandle()">创建公告</el-button>
        </template>
      </Search>
      <table-template :tableData='tableData'
                      :loading='dataListLoading'
                      :fieldManagement='false'
                      :index='true'
                      :dataList='dataList'>
        <template slot="createDate-after">
          <el-table-column prop="noticeType"
                           label="公告类型"
                           min-width="100"
                           align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.noticeType === '1'">文字</span>
              <span v-if="scope.row.noticeType === '2'">图片</span>
              <span v-if="scope.row.noticeType === '3'">视频</span>
              <span v-if="scope.row.noticeType === '4'">文字 + 视频 + 图片</span>
            </template>
          </el-table-column>
        </template>
        <template slot="createDate-after">
          <el-table-column prop="status"
                           label="状态"
                           min-width="100"
                           align="center">
            <template slot-scope="scope">
              <span>
                {{scope.row.status === '0' ? '待发布' : '已发布' }}
              </span>
            </template>
          </el-table-column>
        </template>
        <el-table-column :label="$t('handle')"
                         fixed='right'
                         header-align="center"
                         align="center"
                         width="200">
          <template slot-scope="scope">
            <el-button type="text"
                       size="small"
                       class='brand'
                       v-if="$hasPermission('tb:noticeAnnouncement:reviseStatus') && scope.row.status === '0'"
                       @click="setStatus(scope.row.id)">发布</el-button>
            <el-button type='text'
                       class='brand'
                       @click="openDialog('announcementInfoInfo',scope.row)"
                       size='small'>详情</el-button>
            <el-button type="text"
                       size="small"
                       class='brand'
                       v-if="$hasPermission('tb:noticeAnnouncement:reviseStatus') && scope.row.status === '0'"
                       @click="addOrUpdateHandle(scope.row)">修改</el-button>
            <el-button type="text"
                       class="danger"
                       size="small"
                       v-if="$hasPermission('tb:noticeAnnouncement:byIdDel')"
                       @click="deleteHandle({id:scope.row.id})">{{ $t('delete') }}</el-button>
          </template>
        </el-table-column>
      </table-template>
      <el-pagination :current-page="page"
                     :page-sizes="[10, 20, 50, 100]"
                     :total="total"
                     layout="total, sizes, prev, pager, next"
                     @size-change="pageSizeChangeHandle"
                     @current-change="pageCurrentChangeHandle">
      </el-pagination>
    </div>
    <!-- 弹窗, 新增 / 修改 -->
    <AnnouncementAddOrUpdata ref="addOrUpdate"
                             @callBack="getDataList" />
    <AnnouncementInfo ref="announcementInfoInfo"
                      @callBack="getDataList" />
  </div>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import minFormValidate from '@/mixins/form-validate'
import tableTemplate from '@/components/table-template'
import Search from '@/components/search/search'
import AnnouncementAddOrUpdata from './Announcement-add-or-updata.vue'
import AnnouncementInfo from './Announcement-info.vue'
export default {
  mixins: [mixinViewModule, minFormValidate],
  name: '',
  computed: {
    tableData () {
      return [
        { label: '公告主题', width: '120', prop: 'announcementSubject' },
        { label: '创建时间', width: '100', prop: 'createDate' },
        { label: '已读人数', width: '80', prop: 'readNum' }
      ]
    }
  },
  data () {
    return {
      mixinViewModuleOptions: {
        addOrUpdateURL: '', // 添加或修改接口，API地址
        getDataInfoURL: '', // 数据详情，API地址
        deleteURL: '/tb/noticeAnnouncement/byIdDel', // 删除接口，API地址
        deleteIsBatch: true, // 删除接口，是否需要批量？
        exportURL: '', // 导出接口，API地址
        getDataListURL: '/tb/noticeAnnouncement/conditionQuery',
        getDataListIsPage: false // 数据列表接口，是否需要分页？
      },
      statusList: [
        { id: '0', name: '待发布' },
        { id: '1', name: '已发布' }
      ],
      dataForm: {
        announcementSubject: '',
        status: ''
      },
      content: [],
      dataList: []
    }
  },
  mounted () {
  },
  created () {
    this.getNoticeAnnouncement()
  },
  components: { tableTemplate, Search, AnnouncementAddOrUpdata, AnnouncementInfo },
  methods: {
    sumbit () {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.getPageInit()
        }
      })
    },
    cleaningArticles (content) {
      // eslint-disable-next-line no-useless-escape
      const str = content.replace(/<img\b.*?(?:\>|\/>)/gi, '')
      return str.replace(/<\/?.+?>/gi, '')
    },
    getNoticeAnnouncement () {
      this.$http.get('tb/noticeAnnouncement/conditionQuery').then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.dataList = res.data.data
      })
    },
    setStatus (_id) {
      let obj = {}
      obj.id = _id
      obj.status = '1'
      this.$http.put('tb/noticeAnnouncement/reviseStatus', obj).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.getPageInit()
      })
    },
    addOrUpdateHandle (_id) {
      if (_id) {
        this.$refs.addOrUpdate.init(_id)
      } else {
        this.$refs.addOrUpdate.init()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
